<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>2018定制年历礼盒</title>
  <script type="text/javascript">
    <!-- rem单位基准声明 -->
    var designWidth = 375, maxWidth = 500, bodyFontSize = 14, baseFontSize = 100
    _setBaseFontSize()
    _setBodyFontSize()
    _setReCalcRem()

    // 设置文档默认字体
    function _setBodyFontSize () {
      if (document.body) document.body.style.fontSize = bodyFontSize + 'px'
      else document.addEventListener('DOMContentLoaded', _setBodyFontSize, false)
    }

    // 设置REM基准字号 1rem = 设计图尺寸 / 屏幕dpr / 基准字号
    function _setBaseFontSize () {
      var clientWidth = document.documentElement.clientWidth
      var rem = baseFontSize * (clientWidth > maxWidth ? maxWidth : clientWidth) / designWidth
      document.documentElement.style.fontSize = rem + 'px'
    }

    // 设置屏幕尺寸变化事件代理, 重新计算REM基准尺寸
    function _setReCalcRem () {
      document.addEventListener('DOMContentLoaded', _setBaseFontSize, false)
      window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', _setBaseFontSize, false)
    }
  </script>
  <link href="{{env('CDN_RESOURCE')}}/css/mobile/mobile.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
    }

    input, select {
      outline: none;
      padding-left: 0;
      background-color: #fff;
      -webkit-appearance:none; /*去除系统默认的样式*/
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 点击高亮的颜色*/
    }

    .container {
      width: 100%;
      min-height: 100vh;
      background-image: url('{{env('CDN_RESOURCE')}}/img/mobile/campaign/calendarPresent/bg.png');
      -webkit-background-size: 100% auto;
      background-size: 100% auto;
    }

    #form {
      position: relative;
      top: 2.5rem;
      margin: 0 10px;
      background-color: #fff;
      padding-top: 16px;
    }

    .form-title {
      font-size: 16px;
      color: #4B4F57;
      letter-spacing: 0;
      text-align: center;
    }

    .form-group {
      margin: 16px 5% 0 5%;
      height: 53px;
      border-bottom: 1px solid #E7E8EA;
      position: relative;
    }

    .form-group-left {
      width: 39%;
      display: inline-block;
      margin: 16px 9% 0 5%;
    }

    .form-group-right {
      width: 41%;
      display: inline-block;
      margin: 16px -4px 0 0;
    }

    .form-control-icon {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 8px;
    }

    .form-control-label {
      position: absolute;
      left: 38px;
      font-size: 12px;
      color: #999EA8;
      letter-spacing: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .form-control {
      position: absolute;
      left: 36px;
      bottom: 0;
      height: 36px;
      width: 85%;
      font-size: 14px;
      color: #4B4F57;
      border: 0;
    }

    .form-control-left {
      width: 65%;
      left: 33px;
    }

    .form-control-right {
      width: 65%;
      left: 33px;
    }

    .form-submit {
      margin: 24px auto 0 auto;
      display: block;
      width: 90%;
      height: 50px;
      background: #FF5B34;
      border-radius: 24px;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      border: 0;
      outline: none;
    }

    #success {
      position: absolute;
      top: 2.5rem;
      bottom: 0;
      width: 94%;
      margin-left: 3%;
      background-color: #fff;
      text-align: center;
    }

    .success-title {
      margin-top: 40px;
      font-size: 18px;
      color: #4B4F57;
      letter-spacing: 0;
    }
    .success-content {
      margin-top: 16px;
      font-size: 14px;
      color: #676C75;
      letter-spacing: 0;
      line-height: 28px;
    }
    .success-img {
      margin-top: 24px;
      width: 170px;
      height: 148px;
    }
  </style>
</head>
<body>
<div class="container">
  <div id="form" class="form" style="display: none;">
    <div class="form-title">请填写收件信息</div>
    <div class="form-group">
      <img class="form-control-icon" src="{{env('CDN_RESOURCE')}}/icon/mobile/campaign/calendarPresent/ic_user.png"/>
      <label class="form-control-label" for="name">姓名</label>
      <input id="name" class="form-control" placeholder="" type="text">
    </div>
    <div class="form-group">
      <img class="form-control-icon" src="{{env('CDN_RESOURCE')}}/icon/mobile/campaign/calendarPresent/ic_phone.png"/>
      <label class="form-control-label" for="phone">电话</label>
      <input id="phone" class="form-control" placeholder="" type="text">
    </div>
    <div class="form-group form-group-left">
      <img class="form-control-icon" src="{{env('CDN_RESOURCE')}}/icon/mobile/campaign/calendarPresent/ic_home.png"/>
      <label class="form-control-label" for="province">省</label>
      <select id="province" class="form-control form-control-left"></select>
    </div>
    <div class="form-group form-group-right">
      <label class="form-control-label" for="city">市/县</label>
      <select id="city" class="form-control form-control-right"></select>
    </div>
    <div class="form-group">
      <label class="form-control-label" for="address">详细地址</label>
      <input id="address" class="form-control" placeholder="" type="text">
    </div>
    <button id="submit" class="form-submit">提交</button>
    <div style="height: 24px;"></div>
  </div>
  <div id="success" style="display: none;">
    <p class="success-title">提交成功！</p>
    <p class="success-content">
      发货进度请关注「久趣英语服务号」或短信通知。<br/>
      若需修改收件信息，请及时在公众号留言。
    </p>
    <img class="success-img" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/calendarPresent/ok.png"/>
  </div>
</div>
<div id="alertBox" class="alert-box"></div>
<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/underscore.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src=" {{env('CDN_RESOURCE')}}/js/mobile/wx_config.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}"></script>
<script>
  $(document).ready(function () {
    var province = '', city = ''
    var allList = [
      {
        'name': '北京市',
        'city': ['朝阳区', '海淀区', '通州区', '房山区', '丰台区', '昌平区', '大兴区', '顺义区', '西城区', '延庆县', '石景山区', '宣武区', '怀柔区', '崇文区', '密云县', '东城区', '门头沟区', '平谷区']
      }, {
        'name': '广东省',
        'city': ['东莞市', '广州市', '中山市', '深圳市', '惠州市', '江门市', '珠海市', '汕头市', '佛山市', '湛江市', '河源市', '肇庆市', '潮州市', '清远市', '韶关市', '揭阳市', '阳江市', '云浮市', '茂名市', '梅州市', '汕尾市']
      }, {
        'name': '山东省',
        'city': ['济南市', '青岛市', '临沂市', '济宁市', '菏泽市', '烟台市', '泰安市', '淄博市', '潍坊市', '日照市', '威海市', '滨州市', '东营市', '聊城市', '德州市', '莱芜市', '枣庄市']
      }, {
        'name': '江苏省',
        'city': ['苏州市', '徐州市', '盐城市', '无锡市', '南京市', '南通市', '连云港市', '常州市', '扬州市', '镇江市', '淮安市', '泰州市', '宿迁市']
      }, {
        'name': '河南省',
        'city': ['郑州市', '南阳市', '新乡市', '安阳市', '洛阳市', '信阳市', '平顶山市', '周口市', '商丘市', '开封市', '焦作市', '驻马店市', '濮阳市', '三门峡市', '漯河市', '许昌市', '鹤壁市', '济源市']
      }, {
        'name': '上海市',
        'city': ['松江区', '宝山区', '金山区', '嘉定区', '南汇区', '青浦区', '浦东新区', '奉贤区', '闵行区', '徐汇区', '静安区', '黄浦区', '普陀区', '杨浦区', '虹口区', '闸北区', '长宁区', '崇明县', '卢湾区']
      }, {
        'name': '河北省',
        'city': ['石家庄市', '唐山市', '保定市', '邯郸市', '邢台市', '河北区', '沧州市', '秦皇岛市', '张家口市', '衡水市', '廊坊市', '承德市']
      }, {
        'name': '浙江省',
        'city': ['温州市', '宁波市', '杭州市', '台州市', '嘉兴市', '金华市', '湖州市', '绍兴市', '舟山市', '丽水市', '衢州市']
      }, {
        'name': '香港特别行政区',
        'city': ['香港特别行政区']
      }, {
        'name': '陕西省',
        'city': ['西安市', '咸阳市', '宝鸡市', '汉中市', '渭南市', '安康市', '榆林市', '商洛市', '延安市', '铜川市']
      }, {
        'name': '湖南省',
        'city': ['长沙市', '邵阳市', '常德市', '衡阳市', '株洲市', '湘潭市', '永州市', '岳阳市', '怀化市', '郴州市', '娄底市', '益阳市', '张家界市', '湘西州']
      }, {
        'name': '重庆市',
        'city': ['江北区', '渝北区', '沙坪坝区', '九龙坡区', '万州区', '永川市', '南岸区', '酉阳县', '北碚区', '涪陵区', '秀山县', '巴南区', '渝中区', '石柱县', '忠县', '合川市', '大渡口区', '开县', '长寿区', '荣昌县', '云阳县', '梁平县', '潼南县', '江津市', '彭水县', '璧山县', '綦江县', '大足县', '黔江区', '巫溪县', '巫山县', '垫江县', '丰都县', '武隆县', '万盛区', '铜梁县', '南川市', '奉节县', '双桥区', '城口县']
      }, {
        'name': '福建省',
        'city': ['漳州市', '泉州市', '厦门市', '福州市', '莆田市', '宁德市', '三明市', '南平市', '龙岩市']
      }, {
        'name': '天津市',
        'city': ['和平区', '北辰区', '河北区', '河西区', '西青区', '津南区', '东丽区', '武清区', '宝坻区', '红桥区', '大港区', '汉沽区', '静海县', '宁河县', '塘沽区', '蓟县', '南开区', '河东区']
      }, {
        'name': '云南省',
        'city': ['昆明市', '红河州', '大理州', '文山州', '德宏州', '曲靖市', '昭通市', '楚雄州', '保山市', '玉溪市', '丽江地区', '临沧地区', '思茅地区', '西双版纳州', '怒江州', '迪庆州']
      }, {
        'name': '四川省',
        'city': ['成都市', '绵阳市', '广元市', '达州市', '南充市', '德阳市', '广安市', '阿坝州', '巴中市', '遂宁市', '内江市', '凉山州', '攀枝花市', '乐山市', '自贡市', '泸州市', '雅安市', '宜宾市', '资阳市', '眉山市', '甘孜州']
      }, {
        'name': '广西省',
        'city': ['贵港市', '玉林市', '北海市', '南宁市', '柳州市', '桂林市', '梧州市', '钦州市', '来宾市', '河池市', '百色市', '贺州市', '崇左市', '防城港市']
      }, {
        'name': '安徽省',
        'city': ['芜湖市', '合肥市', '六安市', '宿州市', '阜阳市', '安庆市', '马鞍山市', '蚌埠市', '淮北市', '淮南市', '宣城市', '黄山市', '铜陵市', '亳州市', '池州市', '巢湖市', '滁州市']
      }, {
        'name': '海南省',
        'city': ['三亚市', '海口市', '琼海市', '文昌市', '东方市', '昌江县', '陵水县', '乐东县', '五指山市', '保亭县', '澄迈县', '万宁市', '儋州市', '临高县', '白沙县', '定安县', '琼中县', '屯昌县']
      }, {
        'name': '江西省',
        'city': ['南昌市', '赣州市', '上饶市', '吉安市', '九江市', '新余市', '抚州市', '宜春市', '景德镇市', '萍乡市', '鹰潭市']
      }, {
        'name': '湖北省',
        'city': ['武汉市', '宜昌市', '襄樊市', '荆州市', '恩施州', '孝感市', '黄冈市', '十堰市', '咸宁市', '黄石市', '仙桃市', '随州市', '天门市', '荆门市', '潜江市', '鄂州市', '神农架林区']
      }, {
        'name': '山西省',
        'city': ['太原市', '大同市', '运城市', '长治市', '晋城市', '忻州市', '临汾市', '吕梁市', '晋中市', '阳泉市', '朔州市']
      }, {
        'name': '辽宁省',
        'city': ['大连市', '沈阳市', '丹东市', '辽阳市', '葫芦岛市', '锦州市', '朝阳市', '营口市', '鞍山市', '抚顺市', '阜新市', '本溪市', '盘锦市', '铁岭市']
      }, {
        'name': '台湾省',
        'city': ['台北市', '高雄市', '台中市', '新竹市', '基隆市', '台南市', '嘉义市']
      }, {
        'name': '黑龙江省',
        'city': ['齐齐哈尔市', '哈尔滨市', '大庆市', '佳木斯市', '双鸭山市', '牡丹江市', '鸡西市', '黑河市', '绥化市', '鹤岗市', '伊春市', '大兴安岭地区', '七台河市']
      }, {
        'name': '内蒙古自治区',
        'city': ['赤峰市', '包头市', '通辽市', '呼和浩特市', '乌海市', '鄂尔多斯市', '呼伦贝尔市', '兴安盟', '巴彦淖尔盟', '乌兰察布盟', '锡林郭勒盟', '阿拉善盟']
      }, {
        'name': '澳门特别行政区',
        'city': ['澳门特别行政区']
      }, {
        'name': '贵州省',
        'city': ['贵阳市', '黔东南州', '黔南州', '遵义市', '黔西南州', '毕节地区', '铜仁地区', '安顺市', '六盘水市']
      }, {
        'name': '甘肃省',
        'city': ['兰州市', '天水市', '庆阳市', '武威市', '酒泉市', '张掖市', '陇南地区', '白银市', '定西地区', '平凉市', '嘉峪关市', '临夏回族自治州', '金昌市', '甘南州']
      }, {
        'name': '青海省',
        'city': ['西宁市', '海西州', '海东地区', '海北州', '果洛州', '玉树州', '黄南藏族自治州']
      }, {
        'name': '新疆维吾尔自治区',
        'city': ['乌鲁木齐市', '伊犁州', '昌吉州', '石河子市', '哈密地区', '阿克苏地区', '巴音郭楞州', '喀什地区', '塔城地区', '克拉玛依市', '和田地区', '阿勒泰州', '吐鲁番地区', '阿拉尔市', '博尔塔拉州', '五家渠市', '克孜勒苏州', '图木舒克市']
      }, {
        'name': '西藏区',
        'city': ['拉萨市', '山南地区', '林芝地区', '日喀则地区', '阿里地区', '昌都地区', '那曲地区']
      }, {
        'name': '吉林省',
        'city': ['吉林市', '长春市', '白山市', '白城市', '延边州', '松原市', '辽源市', '通化市', '四平市']
      }, {
        'name': '宁夏回族自治区',
        'city': ['银川市', '吴忠市', '中卫市', '石嘴山市', '固原市']
      }
    ]
    renderForm()
    var isLogin = false
    activeShare ()
    var account = new Account()
    account.getUserInfo(function (err, user) {
      if (!err) {
        isLogin = true
        activeShare(user.shareFlag)
        account.ajax({
          type: 'GET',
          path: '/s/events/calendarPresent',
          success: function (res) {
            if (res.status !== 0) {
              // 已经提交过申请了
              showSuccess();
            }
          }
        })
      }
    })

    function renderForm () {
      renderProvince()
      renderCity()
      $("#form").css('display', 'block');
      $('#province').change(function () {
        renderCity()
      })
      $('#city').change(function () {
        city = getCity()
      })
      $('#submit').click(function () {
        var name = $('#name').val()
        var phone = $('#phone').val()
        var address = $('#address').val()
        if (!name || !phone || !address || !province || !city) {
          showToast({
            text: "请完整填写收件信息，以确保可以收到礼盒！"
          })
          return;
        }
        if (!/^(\+86)?1[34578][0-9]{9}$/i.test(phone)) {
          showToast({
            text: "请填写完整手机号"
          })
          return;
        }
        var data = {
          name: name,
          telephone: phone,
          address: address,
          province: province,
          city: city
        }
        if (isLogin) {
          submit(data)
        } else {
          account.getUserInfo(function (err, user) {
            if (!err) {
              isLogin = true
              activeShare(user.shareFlag)
              submit(data)
            }
          })
        }
      })
    }
    function activeShare (shareFlag) {
      if (!/(MicroMessenger)/i.test(navigator.userAgent)) return;
      var configOption = {
        timestamp: '{{$signature['timestamp']}}',
        nonceStr: '{{$signature['nonceStr']}}',
        signature: '{{$signature['signature']}}',
        jsApiList: ['onMenuShareTimeline', 'chooseWXPay', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone']
      }
      var wxconfig = new WxConfig(configOption, 'calendarPresent')
      wxconfig.activeShare(shareFlag || '', null, {
        title: '【Qkids久趣】4-12岁，在家跟北美外教学英语，100元4课时！',
        desc: 'Qkids久趣，为孩子创造趣味十足的游戏化学习体验。',
        link: window.location.protocol + '//wx2.97kid.com/wx',
        imgUrl: 'https://static-app.97kid.com/site-student/public/img/share.png'
      })
    }
    function submit (data) {
      account.ajax({
        type: 'POST',
        path: '/s/events/calendarPresent',
        data: data,
        success: function () {
          showSuccess();
        },
        error: function (err) {
          if (err.hasOwnProperty('code')) {
            showToast({
              text: err.message
            })
          } else {
            for (var e in err) {
              showToast({
                text: err[e]
              })
              return;
            }
          }
        }
      })
    }
    function showSuccess () {
      $("#form").css('display', 'none');
      $("#success").css('display', 'block');
    }
    function renderProvince () {
      var provinceOptions = reduceOption(_.pluck(allList, 'name'))
      $('#province').append(provinceOptions)
    }
    function renderCity () {
      province = getProvince()
      var cityList = _.find(allList, function (item) {
        return item.name === province
      }).city
      var cityOptions = reduceOption(cityList)
      $('#city').empty()
      $('#city').append(cityOptions)
      city = getCity()
    }
    function reduceOption (list) {
      return '<option selected="selected">' + list.join('</option><option>') + '</option>'
    }
    function getProvince () {
      return $('#province option').not(function () { return !this.selected }).text()
    }
    function getCity () {
      return $('#city option').not(function () { return !this.selected }).text()
    }
    function showToast (options) {
      options = options || {};
      var text = options.text || '';
      var timer = options.timer || 3000;
      var callback = options.callback || function () {};
      var id = 'msg' + Math.ceil(Math.random() * 1000000000);
      //创建提示对话框面板
      var dvMsg = document.createElement("div");
      dvMsg.style.position = 'fixed';
      dvMsg.style.top = '40%';
      dvMsg.style.left = '50%';
      dvMsg.style.marginLeft = '-45%';
      dvMsg.style.width = '90%';
      dvMsg.style.background = 'rgba(0, 0, 0, 0.7)';
      dvMsg.style.zIndex = '999999';
      dvMsg.style.padding = '10px';
      dvMsg.setAttribute('id', id);

      //可以继续采用如上形式创建模拟对话框表格，这里为了方便采用html形式
      var strHtml = "<div style='margin-left: auto; margin-right: auto; color: white;text-align: center;font-size: 15px;'>" + text + "</div>";
      dvMsg.innerHTML = strHtml;
      document.body.appendChild(dvMsg);

      //timer秒后自动关闭selfAlert(提示框)
      setTimeout(function () {
        document.body.removeChild(document.getElementById(id));
        callback(true);
      }, timer);
    }
  })
</script>
</body>
</html>